<template>
    <div class="app-container">
    
  
        <el-row style="height:300px;margin-bottom: 30px;background:#ffffff;padding-bottom: 30px;border-radius: 10px;margin-left: 10px;margin-top:10px;box-shadow: 1px 1px 10px #d1cdcd;width: 50%;"> 
            <el-form style="margin-top:30px" :model="form" ref="form">
            <el-form-item label="场站选择" label-width="90px" required>
            <template>
              <el-col :span="18">

                <el-select @change="totalParkfield" style="width:100%" v-model="form.parkfieldId" filterable multiple placeholder="请选择">
                  <el-option :key="key" :label="labelName" :value="key" ></el-option>
                  <el-option
                    v-for="parkfield in parkfieldList"
                    :key="parkfield.id"
                    :label="parkfield.name"
                    :value="parkfield.id">
                  </el-option>
                </el-select>
              </el-col>
             
            </template>
            
          </el-form-item>

        <el-row>
            <el-col :span="3">
          <el-form-item style="" label="方案1：" label-width="100px">
    
          </el-form-item>
        </el-col> 
          <el-col :span="10">
          <el-form-item label="充值金额(元)" label-width="100px">
                <el-input v-model="feeForm.recharge1" auto-complete="off" style="width:90%"></el-input>
          </el-form-item>
        </el-col> 

        <el-col :span="10">
          <el-form-item label="赠送金额(元)" label-width="100px">
                <el-input v-model="feeForm.give1" auto-complete="off" style="width:90%"></el-input>
          </el-form-item>
        </el-col> 
    </el-row>

    <el-row>
            <el-col :span="3">
          <el-form-item style="" label="方案2：" label-width="100px">
    
          </el-form-item>
        </el-col> 
          <el-col :span="10">
          <el-form-item label="充值金额(元)" label-width="100px">
                <el-input v-model="feeForm.recharge2" auto-complete="off" style="width:90%"></el-input>
          </el-form-item>
        </el-col> 

        <el-col :span="10">
          <el-form-item label="赠送金额(元)" label-width="100px">
                <el-input v-model="feeForm.give2" auto-complete="off" style="width:90%"></el-input>
          </el-form-item>
        </el-col> 
    </el-row>

    <el-row>
            <el-col :span="3">
          <el-form-item style="" label="方案3：" label-width="100px">
    
          </el-form-item>
        </el-col> 
          <el-col :span="10">
          <el-form-item label="充值金额(元)" label-width="100px">
                <el-input v-model="feeForm.recharge3" auto-complete="off" style="width:90%"></el-input>
          </el-form-item>
        </el-col> 

        <el-col :span="10">
          <el-form-item label="赠送金额(元)" label-width="100px">
                <el-input v-model="feeForm.give3" auto-complete="off" style="width:90%"></el-input>
          </el-form-item>
        </el-col> 
    </el-row>
<el-row>
<el-col style="text-align: center;" :span="24">
<el-button type="primary" @click="confirm" size="normal">生成方案列表</el-button>
</el-col> 
</el-row>
        </el-form>

        </el-row>


        
  
      <el-table
        :header-cell-style="{ background: '#ffffff', color: '#000000' }"
        :key="tableKey"
        :row-class-name="tableRowClassName"
        v-loading="listLoading"
        :data="list"
        :row-key="'id'"
        :stripe=true
        ref="parkfieldTable"
        @selection-change="handleTableChange"
        border
        fit
        highlight-current-row
        style="
          width: 100%;
          font-size: 15px;
          box-shadow: 1px 1px 8px #cdcdcd;
          border: 0px;
        "
        :default-sort="{ prop: 'time', order: 'descending' }"
      >
        <el-table-column
          label="ID"
          prop="id"
          sortable="custom"
          align="center"
          width="80"
          :class-name="getSortClass('id')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="场站名称" min-width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="地址" min-width="220px">
          <template slot-scope="scope">
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>
s
 
  
        <el-table-column label="启用时间" min-width="160px">
          <template slot-scope="scope">
            <span>{{ sub(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
  
  
  
        <el-table-column label="占位收费机制" width="140" fixed="right" align="center">
        <template slot-scope="scope">
         <el-button :disabled="userState" class="operateBtn" size="mini" type="primary" @click="editBtn(scope.$index, scope.row)" title="编辑"><i class="el-icon-edit-outline"></i></el-button>
        </template>
        </el-table-column>
  
      </el-table>
  
      <el-row>
        <el-col :span="24" class="page-tool">
          <el-pagination
            layout="total,sizes,prev, pager,next,jumper"
            style="margin-top: 10px"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handlePageChange"
            @current-change="handleNoChange"
          ></el-pagination>
        </el-col>
      </el-row>
  
  
  
      
    </div>
  </template>
  
  <style>
  
  .page-tool {
    background: rgb(237, 231, 231);
  }
  
  .page-tool div {
    text-align: right;
  }
  
  .lock-btn {
    margin-bottom: 5px;
    margin-top: -10px;
  }
  .operateBtn {
    font-size: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  
  .el-table .warning-row {
    background: #fff5ee;
  }
  .el-table__body tr:hover > td {
    background-color: #fdc091;
  }
  .el-table__body tr.current-row > td {
    background-color: #fdc091;
  }
  </style>
  
  
  <script>

  import waves from "@/directive/waves"; // waves directive
  import { lcplateparkfieldApi} from "@/api/lcplateparkfield";
  import { loadParkfieldsApi,loadManagerApi} from "@/api/loadParkfields";

  
  import { getNickName, getTestUserName } from "../../utils/auth";
import ItemVue from '@/layout/components/Sidebar/Item.vue';


  
  export default {
    name: "ComplexTable",
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type];
      },
    },
    queryParams: {
      name: "",
    },
    
    
    data() {
      return {
        queryParams: {
          name: "",
        },
        rules: {
          dayFree: [
              { required: true, message: '请选择占位收费时间', trigger: 'change' }
            ],
          nightFree: [
              { required: true, message: '请选择占位收费时间', trigger: 'change' }
            ]      
        },
        
        roleIndex: true,
        dialogTitle: "添加白名单",
        addDialog: false,
        radio:'',
        addDialog2: false,
        labelWidth: "120px",
        form: {
            parkfieldId:[]
        },
        labelName:'全部',
        parkfieldNo:'',
        hours: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
        roleIndex: true,
        multipleSelection: [],
        tableKey: 0,
        list: [],
        parkfieldList: [],
        total: 0,
        promotionDialogTitle: "",
        promotionDialog: false,
        editFeeDialog: false,
        feeForm: {
         
        },
        managerList:'',
        timeSharing: false,
        //  sortable:true,
        currentPage: 1,
        title:"",
        pageSizes: [10, 20, 40],
        pageNo: 1,
        pageSize: 20,
        listLoading: true,
        listQuery: {
          pageNo: 1,
          pageSize: 41,
          name: undefined,
          phone: undefined,
          number: undefined,
          sort: "+id",
        },
        form:{},

      


        importanceOptions: [1, 2, 3],
    
        showReviewer: false,
        temp: {
          id: undefined,
          importance: 1,
          remark: "",
          timestamp: new Date(),
          title: "",
          type: "",
          status: "published",
        },
        dialogFormVisible: false,
        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "Create",
        },
        searchVal: "", //默认输入为空
        letter: "", //默认不排序
        original: false, //默认从小到大排列
        dialogPvVisible: false,
        pvData: [],
        key:"",
        downloadLoading: false,
      };
    },
  


    mounted: function () {
      this.key = localStorage.getItem("key");
      this.title = localStorage.getItem("title");
      this.loadParkfields()
      this.$nextTick(function () {
        this.lcplateparkfield(this.pageNo, this.pageSize);
      });
    },
  
    computed: {
      userState () {
        return getNickName() === getTestUserName();
      }
    },
    
  
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 == 0) {
          return "warning-row";
        }
        return "";
      },
      getSortClass: function (key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    },
    handleCreate() {
      this.dialogFormVisible = true
      
    },

    totalParkfield(e){
        console.log(this.form.parkfieldId)
        if(this.form.parkfieldId.indexOf(this.key) != -1){
      console.log("quanbu")
      this.form.parkfieldId = [this.key]
        }else{
       
        }
    },

    confirm(){

    },



    updateParkfield(){
    var _this = this;
    
    console.log(_this.form.parkfieldId)
    console.log(_this.radio)

    },
  
       timeSharingChange () {
        let _this = this;
    //    console.log(_this.timeSharing)
      },
      sub(value) {
        if (value === null || undefined) {
          return "";
        } else {
          value = value.substring(0, 16);
          return value;
        }
      },
      sortByPurchase(obj1, obj2) {
        var a = obj1.electricFee2;
        var b = obj2.electricFee2;
        return a - b;
      },
   
      loadParkfields () {
      let _this = this
        loadParkfieldsApi().then(function (resp) {
          if (resp.errmsg === 'ok') {
            _this.parkfieldList = resp.data.dataList
          }
        })
        .catch(function (e) {
          console.log(e)
        })
    },
    loadManager () {
      let _this = this
        loadManagerApi().then(function (resp) {
          if (resp.errmsg === 'ok') {
            _this.managerList = resp.data.dataList
          }
        })
        .catch(function (e) {
          console.log(e)
        })
    },
  
      //列表页码的触发事件
      handlePageChange(pageSize) {
        this.pageSize = pageSize;
        this.lcplateparkfield(this.pageNo, this.pageSize);
      },
      handleNoChange(pageNo) {
        this.pageNo = pageNo;
        this.lcplateparkfield(this.pageNo, this.pageSize);
      },
      handleTableChange(val) {
        this.multipleSelection = val;
      },
      lcplateparkfield(pageNo, pageSize) {
        let _this = this;
        _this.loading = true;
        lcplateparkfieldApi({
          pageNo: pageNo,
          pageSize: pageSize,
          roleCode:_this.key
        }).then((response) => {
          _this.list = response.data.dataList;
          _this.total = response.data.totalNum;
          setTimeout(() => {
            _this.listLoading = false;
          }, 1 * 1000);
        });
      },
      queryBtn() {
        let _this = this;
        _this.loading = true;
        this.loadFeedback(_this.pageNo, _this.pageSize);
      },
  
    
  
    }
  

  
  };
  
  
  
  </script>
  
  
  